<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell title="我的频道" :border="false">
      <van-button
        @click="isEdit = !isEdit"
        size="mini"
        round
        type="danger"
        plain
      >
        {{ isEdit ? "完成" : "编辑" }}
      </van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        :class="{ redFont: i === index }"
        v-for="(obj, i) in userChanList"
        :key="obj.id"
        :text="obj.name"
        :icon="getClearIcon(obj, i)"
        @click="clickChannel(obj, i)"
      />
    </van-grid>

    <!-- 推荐频道 -->
    <van-cell title="推荐频道" :border="false"> </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="(obj, i) in recommandChanList"
        :key="obj.id"
        :text="obj.name"
        @click="addChan(obj, i)"
      />
    </van-grid>
  </div>
</template>

<script>
// 导入 所有频道接口
import { mapState } from 'vuex'
// 导入所有频道接口
import { getAllChannels, addUsrChannel, removeUsrChannel } from '@/api/channels'
// 导入 setItem 方法帮助持久化
import { setItem } from '@/utils/storage'

export default {
  name: 'Yt1102ChannelEdit',
  props: ['userChanList', 'index'],

  data () {
    return {
      // 编辑事件
      isEdit: false,
      // 推荐频道数组
      recommandChanList: [],
      // 白名单频道数组，白名单内的用户频道不能被删除
      whiteList: [0, 1, 2]
    }
  },

  mounted () {},

  methods: {
    // 添加频道
    async addChan (obj, i) {
      // 1.将选中频道从推荐频道中删除
      this.recommandChanList.splice(i, 1)
      // 2.将选中频道添加到我的频道中
      // eslint-disable-next-line vue/no-mutating-props
      this.userChanList.push(obj)
      // 3.数据持久化 登录状态->保存到数据库，未登录状态->保存到本地LocalStroage
      // 判断状态
      try {
        if (this.user) {
          // 如果登录了
          const res = await addUsrChannel({
            id: obj.id,
            seq: this.userChanList.length
          })
          console.log(res)
        } else {
          // 未登录
          setItem(this.$conf.USER_CHNA, this.userChanList)
        }
      } catch (error) {
        console.log('出错了：', error.message)
        this.$toast.fail('服务器繁忙')
      }
    },
    // 删除频道
    // delChan (obj, i) {
    //   // 1.将选中频道从我的频道中删除
    //   // eslint-disable-next-line vue/no-mutating-props
    //   this.userChanList.splice(i, 1)
    //   // 2.将选中频道添加到我的频道中
    //   this.recommandChanList.push(obj)
    // }
    // 获取我的频道关闭按钮图标
    getClearIcon (curChannel) {
      // 如果处于编辑状态，且传入频道的id不在白名单中，则返回 clear 图标名
      if (this.isEdit && !this.whiteList.some((cid) => cid === curChannel.id)) {
        return 'clear'
      }
      return ''
    },

    // 子传父频道下标 点击我的频道按钮方法
    async clickChannel (curChannel, i) {
      // 判断是否为 编辑状态
      if (this.isEdit) {
        // 判断频道是否在白名单中，在则不可以移出
        if (this.whiteList.some((cid) => cid === curChannel.id)) return
        // 如果是编辑状态 则进行频道移出
        // eslint-disable-next-line vue/no-mutating-props
        this.userChanList.splice(i, 1)
        this.recommandChanList.push(curChannel)
        this.recommandChanList.sort((x, y) => x.id - y.id)
        // 如果登陆了，则更新到服务器，否则更新到本地
        if (this.user) {
          try {
            await removeUsrChannel(curChannel.id)
          } catch (error) {
            this.$toast.fail('服务器繁忙')
          }
        } else {
          setItem(this.$conf.USER_CHNA, this.userChanList)
        }
      } else {
        // 如果不是编辑状态，则调用父组件方法，关闭 弹层 并切换选中的频道tab
        this.$emit('changeTab', i)
      }
    }
  },

  computed: {
    ...mapState(['user'])
  },

  async created () {
    // 1.请求获取所有频道列表
    const res = await getAllChannels()
    console.log(res.data.data.channels)
    const allChannel = res.data.data.channels
    // 2.将全部频道 - 用户频道 得到的内容加入到推荐频道列表中
    this.recommandChanList = allChannel.filter(
      (a) => !this.userChanList.some((b) => a.id === b.id)
    )

    // allChannel.forEach((a) => {
    //   // a.如果 a 不在用户频道中，则将它添加到推荐频道列表
    //   if (!this.userChanList.some((b) => b.id === a.id)) {
    //     this.recommandChanList.push(a)
    //   }
    // })
    // console.log(this.recommandChanList)
    // console.log(this.userChanList)
  }
}
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 87px 0;
  .title-text {
    font-size: 32px;
    color: #333;
  }
  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/ .redFont .van-grid-item__text {
    color: red !important;
  }
  /deep/ .my-grid {
    .van-idon-clear {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 15px;
      color: #cacaca;
      z-index: 2;
    }
  }
  /deep/ .channel-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      flex-direction: row;
      white-space: nowrap;
      background-color: #f3f5f7;
      .van-icon-clear {
        font-size: 10px;
        color: #999;
        position: absolute;
        right: -8px;
        top: -8px;
        z-index: 200;
      }
      .van-grid-item__text {
        font-size: 28px;
        color: #222;
        margin-top: 0px;
      }
    }
  }

  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
        .van-grid-item__text {
          margin-top: 0px;
        }
      }
    }
  }
}
</style>
